<template>
	<div class="container">
		<div class="cont">
			<div class="label">是否开启商品审核</div>
			<el-switch v-model="form.isReview" active-text="是" inactive-text="否" inline-prompt @change="change"/>
		</div>
		<div class="cont">
			<div class="label">是否开启微信登录</div>
			<el-switch v-model="form.isWxLogin" active-text="是" inactive-text="否" inline-prompt @change="change"/>
		</div>
		<div class="cont">
			<div class="label">默认头像</div>
			<el-upload action="" :show-file-list="false" :before-upload="uploadFace" :limit="1" accept="image/*">
				<img v-if="form.avatar&&form.avatar!=''" :src="form.avatar" class="avatar" />
				<view class="uploader" v-else><el-icon><Plus /></el-icon></view>
			</el-upload>
		</div>
	</div>
</template>

<script setup>
import { reactive } from 'vue';
import methods from '../../core/methods'

const form = reactive({
	isReview:false,
	isWxLogin:false,
	avatar:''
});

const change=(e,type)=>{
	console.log('change')
}

const uploadFace = (file) =>{
    methods.uploadImg(file)
    .then(res => {
        if(res.code == 200){
            userInfo.face = res.data.path
            ElMessage.success('上传成功')
        }else{
            ElMessage.error(res.msg)
        }
    })
    return false //加上这个，不用走到action的自动上传
}

</script>

<style lang="less" scoped>
	.container {
		background-color: #fff;
		padding: 0 20px;
		box-sizing: border-box;
		.cont{
			display: flex;
			font-size: 15px;
			padding: 15px 0;
			.label{
				width: 120px;
				text-align: right;
				margin: 5px 20px 0 0;
			}
			.uploader{
				width: 100px;
				height: 100px;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid #d9d9d9;
				font-size: 20px;
			}
			.avatar{
				width: 100px;
				height: 100px;
			}
		}
	}
</style>